<template>
    <view class="cu-custom" :style="'height:'+custom_bar+'px; '+(float==true?'position: absolute; width: 100%':'')"
        :class="[float==true?'text-white':'']">
        <view class="cu-bar" :style="style" :class="[bg_image!=null?'none-bg text-white bg-img':'',float==true?'':(bg_color?bg_color:'bg-gradual-nddyny fixed')]">
            <view class="margin-left-20 text-xl flex align-center" @tap="()=>{is_back!=false?BackPage():''}">
                <view v-if="is_back != false">
                    <text class="cuIcon-back"></text>
                </view>
                <view class="text-lg margin-left-6">
                    <slot name="backText"></slot>
                </view>
            </view>
            <view class="content" :style="[{top:status_bar + 'px'}]">
                <slot name="content"></slot>
            </view>
            <view class="action" v-if="tap_refresh">
                <text class="cuIcon-refresh" @tap="_tap_refresh"></text>
            </view>
            <slot name="right"></slot>
        </view>
    </view>
</template>


<script>
    export default {
        props: ['bg_color', 'is_back', 'bg_image', 'tap_refresh', 'float', 'tap_back'],
        data() {
            return {
                status_bar: this.status_bar,
                custom_bar: this.custom_bar
            };
        },
        name: 'cu-custom',
        computed: {
            style() {
                let status_bar = this.status_bar;
                let custom_bar = this.custom_bar;
                let bg_image = this.bg_image;
                let style = `height:${custom_bar}px;padding-top:${status_bar}px;`;
                if (this.bg_image) {
                    style = `${style}background-image:url(${bg_image});`;
                }
                return style
            }
        },
        methods: {
            BackPage() {
                if (this.tap_back) {
                    this.tap_back();
                } else {
                    this.$store.commit('appBackPage');
                }
            },
            _tap_refresh() {
                if (this.tap_refresh) {
                    this.tap_refresh();
                }
            }
        },
    }
</script>

<style>

</style>
